<template>
	<view class="content">
		<view class="tabs_nav">
			<u-tabs :list="list" :is-scroll="false" active-color="#101010" inactive-color="#999999" :current="current"
				@change="tabChange"></u-tabs>
		</view>
		<view class="task_con">
			<view class="task_item" v-for="i in 9">
				<view class="dev_info">
					<view class="">
						<image src="../../static/device/shebei.png" mode=""></image>
					</view>
					<view class="dev_int">
						<view class="int_name">
							<view class="">
								<text>数据采集</text>
								<text>注塑机</text>
							</view>
							<view class="">
								待回访
							</view>
						</view>
						<view class="int_cmp">
							陕西零析云电子有限公司 
						</view>
						<view class="int_be">
							擅长：智能制造，方案咨询，集成规划，
						</view>
					</view>
				</view>
				<view class="dev_ple">
					<view class="referee">
						<text>咨询人： </text>
						<text>王先生  2020-05-05  下午</text>
					</view>
					<view class="">
						￥0.01
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

				list: [{
					name: '全部'
				}, {
					name: '待咨询'
				}, {
					name: '待评价'
				}, {
					name: '已评价'
				}, {
					name: '历史'
				}],
				current: 0,
			};
		},
		methods: {

			tabChange(index) {
				this.current = index;
				console.log(index, 'tab点击')
			}
		},
	};
</script>

<style lang="scss" scoped>
	.content {

		.tabs_nav {
			position: fixed;
			border-radius: 20rpx;
			padding: 0 30rpx;
			padding-top: 16rpx;
			width: 100%;
			z-index: 9;
			/deep/ .u-tab-item {
				font-size: 28rpx !important;
			}
			background: #f8f8f8;
		}
		.task_con{
			padding: 0 30rpx;
			padding-top: 110rpx;
			.task_item{
				background: #FFFFFF;
				padding: 16rpx;
				box-sizing: border-box;
				display: flex;
				flex-direction: column;
				margin-bottom: 30rpx;
				border-radius: 20rpx;
				.dev_info{
					display: flex;
					justify-content: flex-start;
					align-items: center;
					border-bottom: 2rpx solid #E5EBFF;
					padding-bottom: 12rpx;
					image{
						width: 104rpx;
						height: 104rpx;
						margin-right: 30rpx;
					}
					.dev_int{
						
						width: 100%;
						font-size: 24rpx;
						overflow: hidden;
						.int_name{
							display: flex;
							justify-content: space-between;
							view:nth-child(1){
								font-weight: bold;
								text:nth-child(1){
									font-size: 28rpx;
									margin-right: 18rpx;
								}
							}
							view:nth-child(2){
								color: #0379FF;
							}
						}
						.int_cmp{
							color: #666;
						}
						.int_be{
							color: #CCCCCC;
							  overflow: hidden;
							  text-overflow:ellipsis;/* 超出部分显示省略号 */
							  white-space: nowrap;
							height: 32rpx;
						}
					}
				}
				.dev_ple{
					margin-top: 12rpx;
					display: flex;
					justify-content: space-between;
					font-size: 24rpx;
					view:nth-child(1){
						text:nth-child(1){
							margin-right: 18rpx;
						color: #CCCCCC;
						}
						text:nth-child(2){
						color: #4e514e;
						}
					}
					view:nth-child(2){
						color: #FFA905;
					}
				}
			}
		}
	}
</style>
